<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定时器</title>
</head>
<body>
  <h1></h1>
  <button>停止</button>
  <script>
    /**
     * 需求: 在控制台每过一秒输出数字, 该数字会累加
     */
    //声明一个变量
    let index = 1;
    //获取 h1 元素
    let h1 = document.querySelector('h1');
    //获取 button 元素
    let btn = document.querySelector('button');
    //启动定时器
    let timer = setInterval(function(){
      //输出变量
      // console.log(index);
      //修改某一个元素的文本
      h1.innerHTML = index;
      //对 index 变量进行加一
      index++;
    }, 100);

    //绑定单机事件
    btn.onclick = function(){
      //停止定时器
      clearInterval(timer);
    }

  </script>
</body>
</html>